<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title layout:title-pattern="$CONTENT_TITLE - 鲜花管理系统">鲜花管理系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <!-- Custom CSS -->
    <style>
        :root {
            --primary-color: #ff69b4;
            --primary-dark: #ff1493;
            --primary-light: #ffcce0;
            --primary-bg: #fff0f5;
            --primary-hover: #ffecf2;
        }
        
        body {
            background-image: url('../static/bg.jpg') !important;
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('../static/bg.jpg');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            opacity: 0.2;
            z-index: -1;
        }
        
        .navbar {
            background: linear-gradient(135deg, #ff69b4, #ff1493) !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .navbar-brand, .navbar-nav .nav-link {
            color: white !important;
            font-weight: 600;
        }
        
        .navbar-nav .nav-link:hover {
            color: #ffecf2 !important;
        }
        
        .page-header {
            background: linear-gradient(135deg, #ff69b4, #ff1493);
            color: white;
            padding: 25px 0;
            margin-bottom: 30px;
            border-radius: 0 0 15px 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .page-header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="30" height="30" opacity="0.1"><circle cx="50" cy="50" r="20" fill="%23ffffff"/></svg>');
            opacity: 0.1;
        }
        
        .page-header h1 {
            font-weight: 700;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .table {
            margin-bottom: 0;
        }
        
        .table thead {
            background: linear-gradient(135deg, #ff69b4, #ff1493);
            color: white;
        }
        
        .table thead th {
            font-weight: 600;
            border: none;
            padding: 15px;
            vertical-align: middle;
        }
        
        .table tbody td {
            padding: 15px;
            vertical-align: middle;
            border-color: #ffecf2;
        }
        
        .table tbody tr:hover {
            background-color: #ffecf2;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #ff69b4, #ff1493);
            border: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #ff1493, #ff69b4);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .btn-outline-primary {
            color: #ff1493;
            border-color: #ff1493;
        }
        
        .btn-outline-primary:hover {
            background-color: #ff1493;
            color: white;
        }
        
        .btn-danger {
            background: linear-gradient(135deg, #ff6b6b, #ff0000);
            border: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .btn-danger:hover {
            background: linear-gradient(135deg, #ff0000, #ff6b6b);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .btn-secondary {
            background-color: #6c757d;
            border: none;
        }
        
        .alert {
            border-radius: 12px;
            margin-bottom: 25px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        
        .form-control, .form-select {
            border-radius: 10px;
            padding: 12px 15px;
            border: 1px solid #ffcce0;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: #ff69b4;
            box-shadow: 0 0 0 0.25rem rgba(255, 105, 180, 0.25);
        }
        
        .pagination .page-link {
            color: #ff1493;
            border-color: #ffcce0;
        }
        
        .pagination .page-item.active .page-link {
            background-color: #ff1493;
            border-color: #ff1493;
        }
        
        .pagination .page-link:hover {
            background-color: #ffecf2;
        }
        
        footer {
            background: linear-gradient(135deg, #ffcce0, #fff0f5);
            margin-top: auto;
            padding: 15px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
        }
        
        footer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="20" height="20" opacity="0.1"><path d="M20,50 Q35,35 50,50 T80,50" stroke="%23ff69b4" fill="none" stroke-width="2"/></svg>');
            opacity: 0.2;
        }
        
        .flower-icon {
            color: #ff69b4;
            margin-right: 5px;
        }
        
        .search-box {
            border-radius: 30px;
            padding-left: 20px;
            border: 2px solid #ffcce0;
        }
        
        .search-btn {
            border-radius: 30px;
            padding-left: 20px;
            padding-right: 20px;
        }
        
        .add-btn {
            border-radius: 30px;
            padding-left: 20px;
            padding-right: 20px;
        }
        
        .action-btn {
            border-radius: 20px;
            padding: 5px 15px;
        }
        
        .content-container {
            position: relative;
            z-index: 1;
        }
        
        /* Floating flowers animation */
        .floating-flower {
            position: absolute;
            width: 30px;
            height: 30px;
            opacity: 0.3;
            z-index: -1;
            animation: float 15s infinite linear;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.3;
            }
            90% {
                opacity: 0.3;
            }
            100% {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
    <th:block layout:fragment="styles">
        <!-- Page specific styles go here -->
    </th:block>
</head>
<body style="background-image: url('/images/561749740185_.pic_hd.jpg')">
    <!-- Background Flowers -->
    <div class="floating-flowers"></div>
    
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/flowers">
                <i class="bi bi-flower1 flower-icon"></i>鲜花管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/flowers">
                            <i class="bi bi-list-ul me-1"></i>花卉列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flowers/add">
                            <i class="bi bi-plus-circle me-1"></i>添加新花卉
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Page Header -->
    <div class="page-header">
        <div class="container">
            <h1 layout:fragment="header">页面标题</h1>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container mt-4 content-container">
        <!-- Alert Messages -->
        <div th:if="${message}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i>
            <span th:text="${message}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <!-- Content Section -->
        <div layout:fragment="content">
            <!-- Page content goes here -->
        </div>
    </div>

    <!-- Footer -->
    <footer class="text-center text-lg-start mt-5">
        <div class="text-center p-3 position-relative">
            <i class="bi bi-flower1 me-2"></i>© 2023 鲜花管理系统
        </div>
    </footer>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Common Scripts -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Create floating flowers
            const flowerTypes = ['bi-flower1', 'bi-flower2', 'bi-flower3'];
            const floatingFlowersContainer = document.querySelector('.floating-flowers');
            
            for (let i = 0; i < 15; i++) {
                const flower = document.createElement('i');
                const randomFlower = flowerTypes[Math.floor(Math.random() * flowerTypes.length)];
                flower.className = `bi ${randomFlower} floating-flower`;
                flower.style.left = `${Math.random() * 100}%`;
                flower.style.animationDelay = `${Math.random() * 15}s`;
                flower.style.animationDuration = `${15 + Math.random() * 15}s`;
                flower.style.color = '#ff69b4';
                flower.style.fontSize = `${20 + Math.random() * 20}px`;
                floatingFlowersContainer.appendChild(flower);
            }
        });
    </script>
    
    <!-- Additional Scripts -->
    <th:block layout:fragment="scripts">
        <!-- Page specific scripts go here -->
    </th:block>
</body>
</html> 